<template>
  <div>

    <!--顶部搜索筛选等操作 start-->
    <div style="margin:10px 0;display: flex;flex-direction: row;justify-content:space-between; align-items: center">
      <el-button type="success" slot="reference" icon="el-icon-check" @click="Pay" style="height: 35px;">支付</el-button>
      <div class="search_box">
        <el-input style="width: 300px" placeholder="请输入关键字进行模糊查询" v-model="search" >
          <i slot="suffix" class="el-icon-close" @click="clearAndLoad"style="margin-top: 10px"></i>
        </el-input>
        <el-button class="ml-5"type="primary" @click="load">搜索</el-button>
      </div>
    </div >
    <!--顶部搜索筛选等操作 end-->
    <!--表格主体 start-->
    <el-table :data="tableData"
              style="width: 100%"
              :default-sort = "{prop: 'commodityId', order: 'descending'}"
              :header-cell-style="tableHeaderColor" >
      <el-table-column prop="commodityId" label="id"  width="100"></el-table-column>
      <el-table-column prop="commodityName" label="商品名称"  width="140"></el-table-column>
      <el-table-column prop="commodityPrice" label="商品价格(¥)"  width="150"></el-table-column>
      <el-table-column label="商品图片">
        <template v-slot="scope">
          <img :src="scope.row.commodityAvatar" style="height: 50px"/>
        </template>
      </el-table-column>

      <el-table-column label="操作" >
        <template v-slot="scope" >
          <template>
            <el-input-number v-model="tableData[scope.$index].num" :min="0" :max="7" label="描述文字"></el-input-number>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!--表格主体 end-->
    <!--分页 end-->
    <div class="pagination" >
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-sizes="[5,8, 10, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count">
      </el-pagination>
    </div>
    <!--分页 end-->
    <!--嵌套表单 start-->
    <el-dialog :title="dialogFormName" :visible.sync="dialogFormVisible">
      <el-table :data="showData">
        <el-table-column property="name" label="商品名称" width="250"></el-table-column>
        <el-table-column property="num" label="数量"></el-table-column>
      </el-table>
      <div style="font-size: 14px;margin: 10px 10px;letter-spacing: 1px">总金额:{{this.totalamount}}</div>
      <div style="font-size: 14px;margin: 10px 10px;letter-spacing: 1px">
        配送地址:{{this.campus+this.area+this.building+"楼"+this.dormitory+"室"}}</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="CancelPay">取 消</el-button>
        <el-button type="primary" @click="ConfirmPay">确 定</el-button>
      </div>
    </el-dialog>
    <!--嵌套表单 end-->
  </div>
</template>


<script>

import user from "@/views/ShuManagement/User.vue";

export default {
  name: "CommodityManagement",
  data(){
    return{
      plate:"订水管理",
      func:"订水",
      tableData: [],
      BuyData:new Map(),
      showData:[],
      Buyname:"",
      BuyNum:"",
      commoditynames:"",
      commoditynum:"",
      //buytime:"",
      phone:"",
      campus:"",
      area:"",
      building:"",
      dormitory:"",
      totalamount:0.0,
      count:0,
      pageNum:1,
      pageSize:5,
      search:"",
      multipleSelection:[],
      dialogFormVisible:false,
      form:{},
      dialogFormName:"购物车",
      headersObj:{
        token:JSON.parse(localStorage.getItem("user")).token
      }
    }
  },
  created() {
    this.$emit("generateTab",this.plate,this.func)

    this.load();
  },
  methods:{
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #e0f6fe;color: #303133;font-weight: 600;font-size:12px;'
      }
    },
    load() {
      //axios方式http://localhost:9090前缀写在了request.js文件中，可省略
      this.request.get("/water/commodity/page",{
        params: {
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          search:this.search//根据名称，五个方面模糊查询
        }
      }).then(res=>{
        console.log("[load]"+res.code+res.msg)
        this.tableData = res.data.data;
        this.count = res.data.count;
      })
    },
    //分页
    handleSizeChange(pageSize){
      console.log("pageSize:"+pageSize);
      this.pageSize=pageSize;
      this.add();
      this.load();
    },
    handleCurrentChange(pageNum){
      console.log("pageNum:"+pageNum);
      this.pageNum=pageNum;
      this.load();
    },
    clearAndLoad(){
      this.pageNum=1;
      this.pageSize=5;
      this.search="";
      this.load();
    },
    //设置当页商品数量
    add(){
      for (const argument of this.tableData) {
        if(argument.num>=0){
          console.log(argument.commodityName)
          if(this.BuyData.has(argument.commodityName)){
            this.totalamount-=this.BuyData.get(argument.commodityName)*argument.commodityPrice;
          }
          this.BuyData.set(argument.commodityName,argument.num);
          this.totalamount+=argument.num*argument.commodityPrice;
          console.log(argument.num*argument.commodityPrice)
        }
      }
    },
    //用户点击支付
    Pay(){
      this.add();
      let username = JSON.parse(localStorage.getItem("user")).username
      //请求用户地址
      this.request.get("user/getUserInfo?username="+username).then(res => {
        if (res.code == "200") {
          let tab = res.data
          this.phone = tab.phone
          this.campus = tab.campus
          this.area = tab.area
          this.building = tab.building
          this.dormitory = tab.dormitory
          console.log(tab)
        } else {
          this.$message.error("数据失败！");
          return false;
        }
      })
      this.showData=[]
      this.commoditynames=''
      this.commoditynum=''
      for (let Element of this.BuyData.keys()) {
        if(this.BuyData.get(Element)>0){
          this.commoditynames +=Element+','
          this.commoditynum +=this.BuyData.get(Element).toString()+','
          this.showData.push({name:Element,num:this.BuyData.get(Element)})
        }
      }
      this.dialogFormVisible=true;
    },
    //用户点击取消
    CancelPay(){
      this.dialogFormVisible=false;
      this.load()
    },
    //用户确认支付
    ConfirmPay(){
      this.dialogFormVisible=false;
      //检查用户信息
      this.request.post("/water/order/enter?commoditynames="+this.commoditynames+"&commoditynum="+this.commoditynum+
          "&username="+JSON.parse(localStorage.getItem("user")).username+
          "&sumprice="+this.totalamount+"&campus="+this.campus+"&area="+this.area+
          "&building="+ this.building+"&dormitory="+this.dormitory).then(res=>{
        console.log(res)
        if(res.code=="200"){
          this.$message.success("购物成功！");
          this.load();
        }else{
          this.$message.error("购物失败！");
        }
      })
      this.load();
    },
  }
}
</script>

<style scoped>

</style>